<template>
	<view class="page_body">
		<!-- 状态栏高度 设置背景色 占位状态栏-->
		<view class="ztl" :style="{'height':statusBarHeight}"></view>
		<!-- 导航栏 -->
		<navBar bgColor="#FFF">
			<image :slot="'left'" @click="navToBack" :src="xcxImgUrl && xcxImgUrl+'fanhui.svg'" style="width: 36rpx;height: 36rpx;">
			</image>
			<text :slot="'content'">商品详情</text>
		</navBar>
		<!-- 占位盒子 -->
		<view class="" :style="{'height': hieght}"></view>
		<scroll-view class="main_commodityDetail" scroll-y
			:style="{'height': 'calc(100vh - 100rpx - ' + demoTopHieght +')'}">

			<!-- 商品信息 -->
			<view class="main_commodityDetail_detail">
				<template>
					<!-- 轮播图 -->
					<u-swiper v-if="updateNoneImg&&list6.length>0 " :list="list6" imgMode="aspectFit" :height="systemWH+'px'"
						@change="changeSwiper" :autoplay="true" indicatorStyle="right: 20px">
						<view slot="indicator" class="indicator-num">
							<text
								class="indicator-num__text">{{ list6.length ? currentNum + 1 : 0 }}/{{ list6.length }}</text>
						</view>
					</u-swiper>
				</template>
				<view class="main_commodityDetail_detail_bom pd10">
					<view class="main_commodityDetail_detail_title texttowShow">
						{{commodityDetail && 
						commodityDetail.name?
						commodityDetail.name : '' }}
					</view>
					<view class="main_commodityDetail_detail_biaoqian mt10">
						<template
							v-if="commodityDetail.commodityLabelInfo && commodityDetail.commodityLabelInfo.length > 0">
							<view v-for="(item,index) in commodityDetail.commodityLabelInfo" :key="index"
								class="main_commodityDetail_detail_biaoqian_text">
								{{item.labelInfo && item.labelInfo.name ? item.labelInfo.name : ''}}
							</view>
						</template>
					</view>
					<view class="main_commodityDetail_detail_biaoqian_price mt10">
						<view class="main_commodityDetail_detail_biaoqian_price_left">
							<text>￥{{
										commodityDetail.defaultSKU &&
										commodityDetail.defaultSKU.priceTrackingInfo &&
										commodityDetail.defaultSKU.priceTrackingInfo.price ?
										commodityDetail.defaultSKU.priceTrackingInfo.price :
										commodityDetail.defaultSKU && 
										commodityDetail.defaultSKU.skuPriceInfo &&
										commodityDetail.defaultSKU.skuPriceInfo.length &&
										commodityDetail.defaultSKU.skuPriceInfo[0].price ?
										Utils.formatToFixed(commodityDetail.defaultSKU.skuPriceInfo[0].price,'price')
										: 0}}
							</text>
							<text class="_price_left">/{{commodityDetail && 
									commodityDetail.defaultSKU && 
									commodityDetail.defaultSKU.unitInfo && 
									commodityDetail.defaultSKU.unitInfo.name ?
									commodityDetail.defaultSKU.unitInfo.name : ''}}</text>
						</view>
						<view @click="share" class="main_commodityDetail_detail_biaoqian_price_right">
							<image style="width: 40rpx;height: 40rpx;"
								:src="xcxImgUrl && xcxImgUrl+'page_public/static/fenxiang.svg'"></image>
							<text>分享商品</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 领劵 -->
			<!-- <view class="main_coupon" >
				<view  class="coupon_left">领劵</view>
				<view class="coupon_right">
					<view class="coupon_img" >
						<image class=""  src="/static/newpic/couponDetail.svg" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="coupon_text">
						满200减20
					</view>
				</view>
				<view class="" style="width: 24rpx;height: 24rpx;margin-top:10px;margin-left: 400rpx;" @click="showCoupon = true">
					<image class=""  src="/static/newpic/right.svg" style="width: 100%;height: 100%;"></image>
				</view>
			</view> -->
			<!--  -->
		<view class="main_commodityDetail_cangku mt10 pd10"
				v-if="computedFencang && commodityDetail && commodityDetail.divisionMode && commodityDetail.divisionMode == 1">
				<view class="main_commodityDetail_cangku_item" style="border-bottom:none!important;height:40rpx">
					<view class="main_commodityDetail_cangku_item_left ">
						<view class="ml5 textOneShow">库存</view>
					</view>
					<view class="main_commodityDetail_cangku_item_right">
						{{commodityDetail.dataSource ? 
					commodityDetail.dataSource == 1 ?
					commodityDetail.totalStockInfo && commodityDetail.totalStockInfo.totalQty ? 
					commodityDetail.stockMark == 2 ? 
					commodityDetail.totalStockInfo.totalQty+'件' :
					commodityDetail.stockMark == 3 ?
					commodityDetail.totalStockInfo.totalQty > 0 ? 
					'有库存' :
					'无库存' :
					'-' :
					'-' :
					commodityDetail.totalStockInfo && commodityDetail.totalStockInfo.virvualStock ? 
					commodityDetail.stockMark == 2 ? 
					commodityDetail.totalStockInfo.virvualStock+'件' :
					commodityDetail.stockMark == 3 ?
					commodityDetail.totalStockInfo.virvualStock > 0 ? 
					'有库存' :
					'无库存' :
					'-' :
					'-' :
					'-'
					}}
					</view>
				</view>
			</view>
			<!-- 仓库 -->
			<view v-if="computedFencang && commodityDetail && commodityDetail.stockInfo && commodityDetail.stockInfo.length && commodityDetail.stockInfo.length>0"
			class="main_commodityDetail_cangku mt10 pd10">
				<view class="main_commodityDetail_cangku_item" v-for="(item,index) of commodityDetail.stockInfo"
					:key="index">
					<view class="main_commodityDetail_cangku_item_left ">
						<image style="width:32rpx;height: 32rpx;" :src="xcxImgUrl && xcxImgUrl+'page_public/static/cangku.svg'">
						</image>
						<view class="ml5 textOneShow">{{item.name || `-`}}</view>
					</view>
					<view class="main_commodityDetail_cangku_item_right">
						{{commodityDetail.dataSource ? 
						commodityDetail.dataSource == 1 ?
						item.stockInfo && item.stockInfo.totalQty ? 
						commodityDetail.stockMark == 2 ? 
						item.stockInfo.totalQty+'件' :
						commodityDetail.stockMark == 3 ?
						item.stockInfo.totalQty > 0 ? 
						'有库存' :
						'无库存' :
						'-' :
						'-' :
						item.stockInfo && item.stockInfo.virvualStock ? commodityDetail.stockMark == 2 ? 
						item.stockInfo.virvualStock+'件' :
						commodityDetail.stockMark == 3 ?
						item.stockInfo.virvualStock > 0 ? 
						'有库存' :
						'无库存' :
						'-' :
						'-' :
						'-'
						}}
					</view>
				</view>
				<view v-if="oldArr && oldArr.length > 3" @click="toggle" class="main_commodityDetail_cangku_item"
					style="border-bottom:none;height:70rpx; flex;align-items: center;justify-content: center;font-size: 28rpx;color:#999;">
					<image :style="{transform:collapse ? 'rotate(180deg)' : ''}" style="width:30rpx;"
						src="/static/down_arrow.svg" mode="widthFix"></image>
					<view style="margin-left: 20rpx;">{{collapse ? '收起' : '展开'}}更多</view>
				</view>
			</view>

			<!-- 属性 -->
			<view class="main_commodityDetail_shuxin mt10 pd10">
				<view v-if="updateAbbreviation && commodityDetail && 
						commodityDetail.abbreviation" class="main_commodityDetail_shuxin_item">
					<view class="main_commodityDetail_shuxin_item_left ">
						商品简称
					</view>
					<view class="main_commodityDetail_shuxin_item_right textOneShow">
						{{commodityDetail && 
						commodityDetail.abbreviation ? 
						commodityDetail.abbreviation  : '-'}}
					</view>
				</view>
				<view v-if='updateModel && commodityDetail &&
						commodityDetail.model' class="main_commodityDetail_shuxin_item">
					<view class="main_commodityDetail_shuxin_item_left ">
						商品型号
					</view>
					<view class="main_commodityDetail_shuxin_item_right textOneShow">
						{{commodityDetail &&
						commodityDetail.model ? 
						commodityDetail.model  : '-'}}
					</view>
				</view>
				<view v-if='updateNorms && commodityDetail &&
						commodityDetail.norms' class="main_commodityDetail_shuxin_item">
					<view class="main_commodityDetail_shuxin_item_left ">
						商品规格
					</view>
					<view class="main_commodityDetail_shuxin_item_right textOneShow">
						{{commodityDetail &&
						commodityDetail.norms ? 
						commodityDetail.norms  : '-'}}
					</view>
				</view>
				<view v-if='updatePlaceOfOrigin && commodityDetail &&
						commodityDetail.placeOfOrigin' class="main_commodityDetail_shuxin_item">
					<view class="main_commodityDetail_shuxin_item_left ">
						商品产地
					</view>
					<view class="main_commodityDetail_shuxin_item_right textOneShow">
						{{commodityDetail &&
						commodityDetail.placeOfOrigin ? 
						commodityDetail.placeOfOrigin  : '-'}}
					</view>
				</view>
				<view v-if='updateBrand && commodityDetail &&
						commodityDetail.brandInfo && 
						commodityDetail.brandInfo.name' class="main_commodityDetail_shuxin_item">
					<view class="main_commodityDetail_shuxin_item_left ">
						商品品牌
					</view>
					<view class="main_commodityDetail_shuxin_item_right textOneShow">
						{{commodityDetail &&
						commodityDetail.brandInfo && 
						commodityDetail.brandInfo.name ? 
						commodityDetail.brandInfo.name  : '-'}}
					</view>
				</view>
				<view v-if='updateQualityGuaranteePeriod && commodityDetail &&
						commodityDetail.qualityGuaranteePeriod' class="main_commodityDetail_shuxin_item">
					<view class="main_commodityDetail_shuxin_item_left ">
						商品有效期
					</view>
					<view class="main_commodityDetail_shuxin_item_right textOneShow">
						{{commodityDetail &&
						commodityDetail.qualityGuaranteePeriod ? 
						commodityDetail.qualityGuaranteePeriod+'天'  : '-'}}
					</view>
				</view>
				<template
					v-if="updateZdy && commodityDetail && commodityDetail.commodityCustomInfoList && commodityDetail.commodityCustomInfoList.length>0">
					<view v-for="(item,index) in computedCustom"
						class="main_commodityDetail_shuxin_item" :key="index">
						<view class="main_commodityDetail_shuxin_item_left " v-if="item.customValueInfo && 
							item.customValueInfo.length &&
							item.customValueInfo[0].customValue">
							{{item.name ? item.name : ''}}
						</view>
						<view class="main_commodityDetail_shuxin_item_right textOneShow" v-if="item.customValueInfo && 
							item.customValueInfo.length &&
							item.customValueInfo[0].customValue">
							{{item.customValueInfo && 
							item.customValueInfo.length &&
							item.customValueInfo[0].customValue ? 
							item.customValueInfo[0].customValue : ''}}
						</view>
					</view>
				</template>
			</view>

			<!-- 图文详情 -->
			<view class="main_commodityDetail_tuwen mt10">
				<view class="main_commodityDetail_tuwen_titile">
					<image style="width:32rpx;height: 32rpx;margin-right: 10rpx;"
						:src="xcxImgUrl && xcxImgUrl+'page_public/static/tuwenzuo.svg'"></image>
					<text>图文详情</text>
					<image style="width:32rpx;height: 32rpx;margin-left: 10rpx;transform: rotate(180deg)"
						:src="xcxImgUrl && xcxImgUrl+'page_public/static/tuwenyou.svg'"></image>
				</view>
				<view v-if="commodityDetail.details && commodityDetail.details != ''" class="u-content">
					<u-parse :content="commodityDetail.details"
						style="padding:0 20rpx;box-sizing: border-box;"></u-parse>
					<!-- <image src="./static/tw1.png" style="width: 100%;height: 500px;" mode=""></image> -->
				</view>
				<view v-else style="display: flex;align-items: center;justify-content: center;flex-direction: column;
                     height: 357px">
					<!-- <u-empty textSize='16' text='图文详情暂无数据'> -->
					<image :src="xcxImgUrl && xcxImgUrl+'shopping/noshoppingdetail.png'" mode="aspectFill"></image>
					<view>该商品没有更多描述啦！</view>
					</u-empty>
				</view>
			</view>
		</scroll-view>

		<!-- 底部操作按钮 -->
		<view class="main_commodityDetail_btn">
			<view class="main_commodityDetail_btn_left">
				<view :style="{color: shoucangActive ? '#FF9900' : '#333'}" @click="topShoucang"
					class="main_commodityDetail_btn_left_item">
					<image v-if="!shoucangActive" style="width: 40rpx;height: 40rpx;"
						:src="xcxImgUrl && xcxImgUrl+'page_public/static/shoucang.svg'">
					</image>
					<image v-if="shoucangActive" style="width: 40rpx;height: 40rpx;"
						:src="xcxImgUrl && xcxImgUrl+'page_public/static/shoucang_active.svg'">
					</image>
					收藏
				</view>
				<view @click="toCard" class="main_commodityDetail_btn_left_item">
					<image style="width: 40rpx;height: 40rpx;" :src="xcxImgUrl && xcxImgUrl+'gouwuche.svg'"></image>
					购物车
				</view>
			</view>
			<view @click="addCord(1)" class="main_commodityDetail_btn_content" v-if="isOut">
				加入购物车
			</view>
			<view @click="addCord(2)" class="main_commodityDetail_btn_right"  v-if="isOut">
				立即购买
			</view>
		</view>

		<!-- 添加购物车弹出 -->
		<addCordPopup :commonityItem='commodityDetail' :addOrgoumai='addOrgoumai' :updateNoneImg="updateNoneImg"
			ref="addCordPopup"></addCordPopup>
		<!-- 绑定手机号弹出层 -->
		<bindingPhoneNumber :bindingPhoneNumberShow='bindingPhoneNumberShow' @close='bindingPhoneNumberlose'
			@save='bindingPhoneNumberSave' v-if="bindingPhoneNumberShow"></bindingPhoneNumber>

		<!-- 分享页面弹出 -->
		<view class="xxx" :style="{'--left':imageData ? 0 : '-1000rpx'}">
			<u-popup round='30' mode='center' closeable @close="showShare = false;imageData = ''" :show="showShare">
				<view class="poster shareMain my_canvas" id="my-canvas" v-if="!imageData">
					<view class="shareMain_img">
						<image res='uploadImgUrl' class=" my_draw_canvas" data-type="image"
							:data-url="commodityDetail.picture ? uploadImgUrl + commodityDetail.picture : computedMorentu"
							:src="commodityDetail.picture ? uploadImgUrl + commodityDetail.picture : computedMorentu">
						</image>
					</view>
					<view class="shareMain_text my_draw_canvas">
						<view class="shareMain_text_t my_draw_canvas">
							<view class="my_draw_canvas name texttowShow" data-type="text"
								:data-text="commodityDetail.name ? commodityDetail.name : ''">
								{{commodityDetail.name ? commodityDetail.name : '' }}
							</view>
							<view class="price mtb10 my_draw_canvas">
								<text class="price my_draw_canvas" data-type="text" data-text="￥">
									￥
								</text>
								<text class="price my_draw_canvas" data-type="text" :data-text="commodityDetail &&
									commodityDetail.defaultSKU &&
									commodityDetail.defaultSKU.priceTrackingInfo &&
									commodityDetail.defaultSKU.priceTrackingInfo.price ?
									Utils.formatToFixed(commodityDetail.defaultSKU.priceTrackingInfo.price,'price') : commodityDetail &&
														commodityDetail.defaultSKU && 
														commodityDetail.defaultSKU.skuPriceInfo && 
														commodityDetail.defaultSKU.skuPriceInfo.length &&
														commodityDetail.defaultSKU.skuPriceInfo[0].price ?
														Utils.formatToFixed(commodityDetail.defaultSKU.skuPriceInfo[0].price,'price') : 0">{{
												commodityDetail &&
													commodityDetail.defaultSKU &&
													commodityDetail.defaultSKU.priceTrackingInfo &&
													commodityDetail.defaultSKU.priceTrackingInfo.price ?
													Utils.formatToFixed(commodityDetail.defaultSKU.priceTrackingInfo.price,'price') : commodityDetail &&
														commodityDetail.defaultSKU && 
														commodityDetail.defaultSKU.skuPriceInfo && 
														commodityDetail.defaultSKU.skuPriceInfo.length &&
														commodityDetail.defaultSKU.skuPriceInfo[0].price ?
														Utils.formatToFixed(commodityDetail.defaultSKU.skuPriceInfo[0].price,'price') : 0
												
											}}</text>
								<!-- <text class="unit my_draw_canvas" data-type="text" :data-text="commodityDetail &&
										commodityDetail.defaultSKU && 
										commodityDetail.defaultSKU.unitInfo && 
										commodityDetail.defaultSKU.unitInfo.name ?
										commodityDetail.defaultSKU.unitInfo.name : ''">
								</text> -->
								<text class="unit my_draw_canvas" data-type="text" data-text="/">/</text>
								<text class="unit my_draw_canvas" data-type="text" :data-text="commodityDetail &&
												commodityDetail.defaultSKU && 
												commodityDetail.defaultSKU.unitInfo && 
												commodityDetail.defaultSKU.unitInfo.name ?
												commodityDetail.defaultSKU.unitInfo.name : ''">
									{{
										commodityDetail &&
												commodityDetail.defaultSKU && 
												commodityDetail.defaultSKU.unitInfo && 
												commodityDetail.defaultSKU.unitInfo.name ?
												commodityDetail.defaultSKU.unitInfo.name : ''
							}}</text>
							</view>
							<view class="my_draw_canvas text" data-type="text" data-text="扫描右侧二维码进行购买">扫描右侧二维码进行购买
							</view>
						</view>
						<view class="shareMain_text_b">
							<image class="my_draw_canvas" data-type="image"
								:data-url="ewm ? uploadImgUrl + ewm : updateNoneImg"
								:src="ewm ? uploadImgUrl + ewm : updateNoneImg"></image>
						</view>
					</view>
					<view @click="createPoster" class="xiazai">
						点击生成海报
					</view>
				</view>
				<view class="shareMain" id="poster" v-else>
					<image style="border-radius:20rpx 20rpx 0 0" :src="imageData" mode="widthFix"></image>
					<view @click="xiazai" class="xiazai">
						<image class="mr10" :src="xcxImgUrl && xcxImgUrl+'page_public/static/xiazai.svg'"></image>
						长按图片保存到相册
					</view>
				</view>
			</u-popup>
		</view>
		<canvas style="position: fixed;left:-1000px;top:-1000px;" canvas-id="myCanvas" class="myCanvas"
			:style="{width:poster.width+'px',height:poster.height+'px'}"></canvas>
		<!-- 领劵弹框 -->
		 <view class="show_coupon">
		 	<u-popup :show="showCoupon" mode="bottom">
		 	    <view class="show_coupon_title">
		 	        <text>领劵下单</text>
		 	    </view>
				<view class="show_coupon_content">
					<scroll-view scroll-y="">
						<view class="content">
							<view style="width:355px; height: 100px;">
								<!-- <image class=""  src="/static/newpic/couponList.svg" style="width: 100%;height: 100%;"></image> -->
								<image class=""  src="/static/newpic/couponDetails.svg" style="width: 100%;height: 100%;"></image>
							</view>
							<view class="list">
								<view class="content_left">
									<text style="font-size: 40rpx;">￥</text>
									<text style="font-weight: 700;font-size: 60rpx;color: #EC4141;">80</text>
								</view>
								<view class="content_right">
								<view class="content_title">
									<view class="content_title1" >满800减80优惠券满80优惠券满80</view>
									<view class="content_title2" >服装衣服专用服装衣服专用衣服专用</view>
									<view class="content_title3" >有效期至: 2020.08.31 23:59</view>
								</view>
									<view class="content_nouse">
									 领取
									</view>
									<!-- <view class="content_use">
									 已领取
									</view> -->
								</view>
							</view>
						</view>
						
					</scroll-view>
				    
				</view>
		 		<view class="show_coupon_bottom">
		 			<u-button @click="showCoupon = false">取消</u-button>
		 		</view>
		 	</u-popup>
		 </view>
		         
	</view>
</template>

<script>
	//html转canvas
	// import html2canvas from 'html2canvas'
	import html2canvas from '@/utils/html2canvas.js'
	import {
		mapGetters
	} from 'vuex'
	import {
		getMallCommodityInfo,
		getCurrentMallMember,
		addOrCancelMallCommodityInfoCollect,
		addMallShoppingCart,
		getWxQRCode,
		goLogin
	} from '@/api/global.js'
	import {
		uploadImgUrl,
		IMGURL
	} from '@/utils/request.js'
	import addCordPopup from '@/components/addCardPopup/addCardPopup.vue'
	import bindingPhoneNumber from '@/components/bindingPhoneNumber/bindingPhoneNumber.vue'
	import {
		forEach
	} from 'axios/lib/utils'
	import Wxml2Canvas from 'wxml2canvas';
	export default {
		components: {
			addCordPopup,
			bindingPhoneNumber
		},
		computed: {
			...mapGetters(['demoTopHieght']),
			//返回默认图
			computedMorentu() {
				return this.$store?.state?.morentu
			},
			computedCustom(){
				return this.commodityDetail && this.commodityDetail.commodityCustomInfoList && this.commodityDetail.commodityCustomInfoList.filter(v => v.customValueInfo && 
							v.customValueInfo.length &&
							v.customValueInfo[0].customValue)
			},
			//返回有图无图控制
			updateNoneImg() {
				return this.$store.state.configSetting.noneImge == 1 ? false : true

			},
			//返回商品简称
			updateAbbreviation() {
				return this.$store.state.configSetting.commonityAbbreviation == 1 ? true : false
			},
			//返回商品型号
			updateModel() {
				return this.$store.state.configSetting.commonityModel == 1 ? true : false
			},
			//返回商品型号
			updateModel() {
				return this.$store.state.configSetting.commonityModel == 1 ? true : false
			},
			//返回商品规格
			updateNorms() {
				return this.$store.state.configSetting.commonityNorms == 1 ? true : false
			},
			//返回商品产地
			updatePlaceOfOrigin() {
				return this.$store.state.configSetting.commonityPlaceOfOrigin == 1 ? true : false
			},
			//返回商品品牌
			updateBrand() {
				return this.$store.state.configSetting.commonityBrand == 1 ? true : false
			},
			//返回商品有效期
			updateQualityGuaranteePeriod() {
				return this.$store.state.configSetting.commonityQualityGuaranteePeriod == 1 ? true : false
			},
			//返回商品自定义
			updateZdy() {
				return this.$store.state.configSetting.commonityZdy == 1 ? true : false
			},
			//是否开启分仓模式
			computedFencang() {
				return this.$store?.state?.configSetting?.fencang == 1 ? true : false
			},
			systemWH(){
				return uni.getSystemInfoSync().windowWidth;
			}
		},
		data() {
			return {
				showCoupon:false,//优惠卷弹框
				isOut:'',
				poster: {
					width: ``,
					height: ``
				},
				IMGURL,
				uploadImgUrl,
				statusBarHeight: '',
				hieght: '',
				currentNum: 0,
				list6: [
					// 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					// 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					// 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				shoucangActive: false, //收藏
				commodityId: '', //商品spuid 
				commodityDetail: {}, //根据商品id获取的商品信息
				bindingPhoneNumberShow: false, //绑定手机号弹出层
				addOrgoumai: 1, //1.添加购物车 2.购买
				showShare: false, //分享弹出
				imageData: '', //生成海报后的地址
				ewm: '', //商品分享二维码
				type: 0, //1.扫小程序码
				collapse: false,
				oldArr: [],
				noopen:'',
				warehouseId:''
			};
		},
		async onLoad(options) {
			this.warehouseId = this?.$store?.state?.warehouseInfo?.warehouseId || '';
			console.log(options, '404', uni.getStorageSync('visitorLoginInfo'));
			uni.setStorageSync('scene',options?.scan);
			this.noopen = options.option
			if (uni.getStorageSync('visitorLoginInfo')) {
				if (JSON.parse(uni.getStorageSync('visitorLoginInfo')).MallMember.status == 1) {
					await this.$onLaunched; //等app.vue执行完 调用接口
				}
			}
			//如果是分享进入 调用登录 保存信息
			if (this.$store.state.cType == 1) {
				this.commodityId = this.$store?.state?.commonityId || '' //拿到携带的id

				// 进来之后就修改
				this.$store.commit('updateCType', 2)
				console.log(this.commodityId, 'common414');
				// this.commodityId = this.$store.state.commodityId
				// //保存商户信息
				// // this.$store.commit('updateShanghu',options)
				// let res = await goLogin({
				// 	branchId: this.$store.state.branchId, //分支机构id[关联分支机构表]
				// 	bussinessId: this.$store.state.bussinessId, //商户id[关联商户表]
				// 	accountId: this.$store.state.accountId, //账套id[关联账套表]
				// 	uuid: this.$store.state.openId || ''
				// })
				// if (res.code == 2000) {
				// 	console.log(res);
				// 	// 存储账户信息
				// 	uni.setStorageSync('visitorLoginInfo', JSON.stringify(res.data.info))
				// 	//存储临时token
				// 	uni.setStorageSync('visitorAccessToken', JSON.stringify(res.data.info.accessToken))
				// 	this.$store.commit('updateToken', res.data.info.accessToken)

				// 	//获取商城系统参数设置
				// 	this.$store.dispatch('configSetting/getSetting')

				// 	this.$isResolve() //标记等这走完 转同步在main.js中挂载 home首页监听
				// 	// 先判断是否是会员 是会员 直接进 不是会员 在判断是否开启游客模式
				// 	if (res?.data?.info?.MallMember?.status == 1) {
				// 		//根据状态判断是否是开启游客模式 开启则进入首页 没开启则去登录 绑定手机号
				// 		if (res?.data?.info?.visitorStatus == 2) { //1.开启 2.没有开启
				// 			uni.navigateTo({
				// 				url: '/pages/login/login?type=noVisitorStatus'
				// 			})
				// 		}
				// 	}
				// }
			} else {
				this.commodityId = options?.commodityId || '' //拿到携带的id
				// this.type = options?.type || 0 //判断是否是扫小程序码进入
			}
			await this.getDetail() //获取商品详情

		},
		onShow() {
			this.$nextTick(() => {
				// 获取状态栏的高度
				this.statusBarHeight = this.$store.state.statusBarHeight * 2 + 'rpx'
				// 计算站位的高度
				this.hieght = (this.$store.state.navBarHeight) * 2 + 'rpx'
				console.log(this.hieght);
				//获取高度
				this.Utils.getDemoTopHeight('main_commodityDetail')
			})
		},
			provide() {
									return {
										resetList: this.resetList
									}
								},
		methods: {
			// 购物车数量改变
					resetList(){
						console.log('resetList')
						this.commonityPageData = {
							currentPage: 1,
							pageSize: 10
						},
						this.getCommonityList()
					},
			changeSwiper(e){
				this.currentNum = e.current;
			},
			toggle() {
				this.collapse = !this.collapse;
				if (!this.collapse) {
					this.commodityDetail.stockInfo = this.oldArr.slice(0, 3);
				} else {
					this.commodityDetail.stockInfo = this.oldArr.slice(0);
				}
			},
			//获取二维码链接展示
			async getCodeUrl() {
				let res = await getWxQRCode({
					scene: `${this.commodityDetail.commodityId}_1`
				})
				if (res.code == 2000) {
					this.ewm = res?.data?.info
				}
			},
			//保存到相册
			xiazai() {
				uni.saveImageToPhotosAlbum({
					filePath: this.imageData,
					success: () => {
						uni.showToast({
							title: `保存成功`
						})
						this.showShare = false
					
					},
					fail: () => {
						uni.showToast({
							title: `保存失败`
						})
					},
					complete: () => {
						this.imageData = '';
					}
				})
			},
			//生成海报
			createPoster() {
				const that = this
				const query = wx.createSelectorQuery().in(this);
				query.select('#my-canvas').fields({ // 选择需要生成canvas的范围
					size: true,
					scrollOffset: true
				}, data => {
					let width = data.width;
					let height = data.height;
					that.poster = {
						width,
						height
					}
					setTimeout(() => {
						that.startDraw()
					}, 1000);
				}).exec()
                //rgion
				//     uni.showLoading({
				//       title: '正在生成海报'
				//     })
				//     let dom = document.querySelector('#poster')
				//     html2canvas(dom, {
				//       width: dom.clientWidth, //dom 原始宽度
				//       height: dom.clientHeight,
				//       scrollY: 0,
				//       scrollX: 0,
				//       useCORS: true
				//     }).then((canvas) => {
				//       uni.hideLoading()
				//       //成功后调用返回canvas.toDataURL返回图片的imageData
				//       this.imageData = canvas.toDataURL('image/png', 1)
				// console.log(this.imageData);
				//     })
				 //#rgion
			},
			startDraw() {
				let that = this

				// 创建wxml2canvas对象
				let drawMyImage = new Wxml2Canvas({
					element: 'myCanvas', // canvas的id,
					obj: that, // 传入当前组件的this
					width: this.poster.width,
					height: this.poster.height,
					background: '#fff', // 生成图片的背景色
					progress(percent) { // 进度
						// console.log(percent);
					},
					finish(url) { // 生成的图片
						wx.hideLoading()
						console.log(url)
						that.imageData = url;
						// that.savePoster(url)
					},
					error(res) { // 失败原因
						console.log(res);
						wx.hideLoading()
					}
				}, this);
				let data = {
					// 获取wxml数据
					list: [{
						type: 'wxml',
						class: '.my_canvas .my_draw_canvas ', // my_canvas要绘制的wxml元素根类名， my_draw_canvas单个元素的类名（所有要绘制的单个元素都要添加该类名）
						limit: '.my_canvas', // 要绘制的wxml元素根类名
						x: 0,
						y: 0
					}]
				}
				// 绘制canvas
				drawMyImage.draw(data, this);
			},
			//点击分享弹出弹出窗
			share() {
				this.showShare = true;
				uni.showLoading({
					title: `海报生成中`
				})
				setTimeout(() => {
					this.createPoster();
				}, 1000)
			},
			//点击添加到购物车
			async addCord(index) {
				if (index == 1) { //加入购物车
					this.addOrgoumai = 1
				}
				if (index == 2) { //立即购买
					this.addOrgoumai = 2
				}

				//首先判断是否是游客 如果是游客 弹出绑定手机号弹窗
				// 获取本地信息 判断
				// let userInfo = uni.getStorageSync('visitorLoginInfo') ? JSON.parse(uni.getStorageSync(
				// 	'visitorLoginInfo')) : {};
				// if (userInfo?.MallMember?.status == 1) { //游客
				// 	this.bindingPhoneNumberShow = true
				// } 
				let res = await getCurrentMallMember()
				console.log(res);
				if (res.data?.info?.status == 1) { //游客
					this.bindingPhoneNumberShow = true
				} else if (this.commodityDetail.skuInfo && this.commodityDetail.skuInfo.length > 1) {

					//如果是多单位 或者 多单位且一个自由项
					if ((this.commodityDetail.isUnits == 1 && this.commodityDetail.isSpecs == 2) || (this
							.commodityDetail
							.isUnits == 1 && this.commodityDetail.isSpecs == 1)) {
						//循环sku 比对销售默认单位 没有就取第一个
						this.commodityDetail.skuInfo.forEach((it, index) => {
							if (it.unitInfo.name == this.commodityDetail.defaultSKU.unitInfo.name) {
								//赋值对应下标
								this.$refs.addCordPopup.unitsActive = index
								//保存默认单位的sku信息 关闭选项卡是重新赋值
								this.$store.commit('updateSkuInfo', this.commodityDetail.defaultSKU)


							}
						})

					}

					//如果是多自由项商品 先处理数据格式 方便弹窗内展示
					if (this.commodityDetail.isSpecs == 1 && this.commodityDetail.isUnits == 2) {
						//先循环自由项名称数组
						this.commodityDetail.specses = this.commodityDetail.specses.map((it, inx) => {
							//循环多自由项sku数组 取出里面对应的项
							let a = this.commodityDetail.skuInfo.map(ite => {
								return ite.specsOptionInfo[inx]
							})
							//去重
							const map = new Map();
							const newArr = a.filter(v => !map.has(v.optionName) && map.set(v.optionName, 1));
							console.log(newArr);


							// 放到自由项名称数组里 
							return {
								...it,
								cses: newArr,
								specsesActive: 0
							}
						})
						if (this.commodityDetail.specses && this.commodityDetail.specses.length) {
							let f1 = this.commodityDetail.skuInfo.map(v => {
								v.specsOptionInfo[0]['name'] = this.commodityDetail.specses.length == 2 ? v
									.specsOptionInfo[0]
									.optionName + '-' + v.specsOptionInfo[1].optionName : v.specsOptionInfo[0]
									.optionName;
								return v.specsOptionInfo[0];
							});
							let result = new Map();
							f1 = f1.filter(v => !result.has(v.optionName) && result.set(v.optionName, 1))
							for (let i = 0; i < f1.length; i++) {
								for (let j = 0; j < f1.length; j++) {
									if (f1[i].optionName == f1[j].optionName && i != j) {
										f1.splice(j, 1);
									}
								}
							}
							let f2 = ``;
							if (this.commodityDetail.specses.length == 2) {
								f2 = this.commodityDetail.skuInfo.map(v => {
									v.specsOptionInfo[1]['name'] = this.commodityDetail.specses.length == 2 ? v
										.specsOptionInfo[0].optionName + '-' + v.specsOptionInfo[1]
										.optionName : '';
									return v.specsOptionInfo[1];
								});
								let result1 = new Map();
								f2 = f2.filter(v => !result1.has(v.optionName) && result1.set(v.optionName, 1))

								for (let i = 0; i < f2.length; i++) {
									for (let j = 0; j < f2.length; j++) {
										if (f2[i].optionName == f2[j].optionName && i != j) {
											f2.splice(j, 1);
										}
									}
								}
							}
							let all = this.commodityDetail.skuInfo.map(v => {
								return this.commodityDetail.specses.length == 2 ? v.specsOptionInfo[0]
									.optionName +
									'-' + v
									.specsOptionInfo[1].optionName : v.specsOptionInfo[0].optionName;
							})
							console.log(all)
							console.log(f1)
							this.commodityDetail.specses[0]['list'] = f1.map(v => ({
								currentObj: ({
									...v,
									checked: false
								}),
								all,
								name: v.name
							}));
							if (this.commodityDetail.specses.length == 2) {
								this.commodityDetail.specses[1]['list'] = this.commodityDetail.specses.length == 2 ? f2
									.map(v => ({
										currentObj: ({
											...v,
											checked: false
										}),
										all,
										name: v.name
									})) : [];
								console.log(this.commodityDetail.specses,'this.commodityDetail');
							}

						}
					}
					// this.commonityItem = item
					this.$refs.addCordPopup.showPopup = true //弹出层选sku
				} else { //不是自由项商品 直接添加购物车
					//添加购物车之前 做价格校验
					// if(this.commodityDetail?.defaultSKU?.skuPriceInfo?.[0]?.price == 0){
					// 	this.Utils.toast(`当前商品暂无价格，无法${index == 1 ? '添加购物车' : '立即购买'}`)
					// 	return
					// }
					if (index == 1) {
						this.addCard(this.commodityDetail)
					} else {
						this.$refs.addCordPopup.showPopup = true 
						//拼出订单详情需要的结构
						// let arr = []
						// arr.push({
						// 	spuInfo: {
						// 		picture: this.commodityDetail?.picture || '', //头像
						// 		name: this.commodityDetail?.name || '',
						// 	},
						// 	children: [{
						// 		skuChecked: true,
						// 		skuInfo: this.commodityDetail?.defaultSKU || {},
						// 		price: this?.commodityDetail?.defaultSKU?.priceTrackingInfo?.price || this.commodityDetail?.defaultSKU?.skuPriceInfo?.[0]?.price || 0,
						// 		commodityId: this.commodityDetail?.defaultSKU?.commodityId || '',
						// 		commodityDetailId: this.commodityDetail?.defaultSKU?.detailId || '',
						// 		qty: 1,
						// 		money: this.Utils.formatToFixed(1 * (this?.commodityDetail?.defaultSKU?.priceTrackingInfo?.price || this.commodityDetail?.defaultSKU
						// 			?.skuPriceInfo?.[0]?.price), 'money'),
						// 		summary: '',
						// 		branchId: this.$store.state.branchId, //商品详情对象中没有 取全局
						// 		accountId: this.commodityDetail?.defaultSKU?.accountId || '',
						// 		bussinessId: this.commodityDetail?.defaultSKU?.bussinessId || '',
						// 	}]
						// })


						// //先把购物车商品添加vuex =在结算页面回显
						// this.$store.commit('cardCommonity', arr)

						// uni.navigateTo({
						// 	url: '/page_public/confirmOrder?type=2'
						// })
					}
				}


				// this.$refs.addCordPopup.showPopup = true

			},
			//添加购物车
			async addCard(item) {
				console.log(item,'库存');
				if (item.defaultSKU.stockNum <= 0) {
										this.Utils.toast(`暂无库存`);
										return;
									}
				let res = await addMallShoppingCart({
					type: 1, //类型[1：普通购物车 2：商品满减购物车 3：商品满赠购物车]
					commodityId: item.commodityId || '', //商品SPUid
					commodityDetailId: item?.defaultSKU?.detailId || '', //商品SKUid
					qty: 1,
					price: item?.defaultSKU?.priceTrackingInfo?.price || item?.defaultSKU?.skuPriceInfo?.[0]?.price || 0,
					money: this.Utils.formatToFixed(1 * (item?.defaultSKU?.priceTrackingInfo?.price || item?.defaultSKU?.skuPriceInfo?.[0]?.price), 'money') ||
						0,
					summary: '',
				})
				if (res.code == 2000) {
					this.Utils.toast('已加入购物车')
					this.$emit('shuaxin')
				} else {
					this.Utils.toast(`${res.msg}`)
				}
			},
			//关闭绑定手机号弹出
			bindingPhoneNumberlose() {
				this.bindingPhoneNumberShow = false
			},
			//手机号弹窗框确认
			bindingPhoneNumberSave() {
				//关闭弹窗
				this.bindingPhoneNumberShow = false
			},
			//获取商品详情
			async getDetail() {
				console.log(this.commodityId, 'common604');
				let res = await getMallCommodityInfo({
					commodityId: this.commodityId,
					warehouseId:this.warehouseId
				})
				if (res.code == 2000) {
					this.commodityDetail = res?.data?.info || {}
					this.getCodeUrl();
					//处理轮播图数据
					let arr = this.commodityDetail?.commodityFileInfo && this.commodityDetail?.commodityFileInfo
						.length ?
						this.commodityDetail?.commodityFileInfo.map(item => item.url) : [];
					this.list6 = arr.map(item => {
						item = this.uploadImgUrl + item
						return item
					})
					//处理是否收藏
					console.log(this.commodityDetail, 'this.commodityDetail');
					this.shoucangActive = this.commodityDetail?.isCollected == 1 ? true : false;
					this.isOut = this.commodityDetail?.status == 1 ? true : false;
					// this.commodityDetail.stockInfo = [...this.commodityDetail.stockInfo,...this.commodityDetail.stockInfo,...this.commodityDetail.stockInfo,...this.commodityDetail.stockInfo]
					this.oldArr = this.commodityDetail.stockInfo || [];
					this.commodityDetail.stockInfo = this.oldArr.slice(0, 3);
				} else {
					this.Utils.toast(`${res.msg}`)
				}
			},
			//点击收藏
			async topShoucang() {
				this.shoucangActive = !this.shoucangActive
				let res = await addOrCancelMallCommodityInfoCollect({
					type: this.shoucangActive ? 1 : 2, //类型[1.添加  2.取消]
					commodityIds: [this.commodityId]
				})
				if (res.code == 2000) {
					if (this.shoucangActive) {
						this.Utils.toast('收藏成功')
					} else {
						this.Utils.toast('取消收藏')
					}
				} else {
					this.Utils.toast(`${res.msg}`)
				}
			},
			//返回上一级
			navToBack() {
				if (this.$store.state.cType == 2) {
					console.log(this.$store.state.cType, 'common返回');
					uni.switchTab({
						url: '/pages/home/home'
					})
				}
				else if(uni.getStorageSync('scene')){
					uni.reLaunch({
						url:`/pages/home/home?noOpen=${this.noopen}`
					})
					uni.removeStorageSync('scene');
				}
			
				 else {
					uni.navigateBack()
				}
			},
			//点击购物车去购物车
			toCard() {
				uni.switchTab({
					url: '/pages/shoppingCard/shoppingCard'
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.my_canvas {
		left: -1000rpx;
	}
  /deep/.nav_item {
	  padding-left: 6rpx
  }
	.xxx /deep/.u-popup__content {
		left: var(--left);
	}

	.xxx /deep/.u-icon--right {
		border: 2rpx solid #000;
		border-radius: 50%;
		width: 30rpx !important;
		height: 30rpx !important;
		justify-content: center !important;

		text {
			color: #000 !important;
		}
	}

	.ztl {
		width: 100%;
		background-color: #FFF;
	}

	.main_commodityDetail {
		width: 100%;
		box-sizing: border-box;

		.main_commodityDetail_detail {
			background-color: #FFF;

			.main_commodityDetail_detail_bom {
				.main_commodityDetail_detail_title {
					color: text_color_333;
					font-size: $font_size_16;
				}

				.main_commodityDetail_detail_biaoqian {
					.main_commodityDetail_detail_biaoqian_text {
						display: inline-block;
						font-size: $font_size_12;
						border-radius: $border_radius_4;
						color: $text_color_ec4141;
						border: 1px solid $text_color_ec4141;
						padding: 8rpx;
						margin-right: 10rpx;
					}
				}

				.main_commodityDetail_detail_biaoqian_price {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.main_commodityDetail_detail_biaoqian_price_left {
						font-size: $font_size_20;
						color: $text_color_ec4141;

						._price_left {
							font-size: $font_size_14;
							color: $text_color_808080;
						}
					}

					.main_commodityDetail_detail_biaoqian_price_right {
						font-size: $font_size_12;
						color: $text_color_333;
						display: flex;
						align-items: center;
					}
				}
			}

		}

		// 仓库
		.main_commodityDetail_cangku {
			width: 100%;
			box-sizing: border-box;
			background-color: #FFF;
			padding-top: 12rpx;	
		
			.main_commodityDetail_cangku_item:last-child {
				border-bottom: none;
				height: 50rpx;
			}

			.main_commodityDetail_cangku_item {
				width: 100%;
				height: 88rpx;
				min-height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #e5e5e5;
				
				.main_commodityDetail_cangku_item_left {
					font-size: $font_size_14;
					color: $text_color_333;
					display: flex;
					align-items: center;
					width: 80%;

					image {
						width: 32rpx;
					}

					view {
						flex: 1;
					}
				}

				.main_commodityDetail_cangku_item_right {
					font-size: $font_size_14;
					color: $text_color_808080;
					width: 20%;
					text-align: right;
				}
			}
		}

		.textOneShow {
			-webkit-line-clamp: inherit !important;
		}

		// 属性
		.main_commodityDetail_shuxin {
			width: 100%;
			box-sizing: border-box;
			background-color: #FFF;
			padding-top: 0px;
			padding-bottom: 0px;

			.main_commodityDetail_shuxin_item:last-child {
				border-bottom: none;
			}

			.main_commodityDetail_shuxin_item {
				width: 100%;
				min-height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #e5e5e5;

				.main_commodityDetail_shuxin_item_left {
					width: 25%;
					font-size: $font_size_14;
					color: $text_color_333;
				}

				.main_commodityDetail_shuxin_item_right {
					width: 75%;
					font-size: $font_size_14;
					color: $text_color_808080;
				}
			}
		}

		// 图文详情
		.main_commodityDetail_tuwen {
			width: 100%;
			background-color: #FFF;

			.main_commodityDetail_tuwen_titile {
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: $text_color_333;
			}
		}

	}

	// 底部操作按钮
	.main_commodityDetail_btn {
		background-color: #FFF;
		width: 100%;
		height: 100rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;

		.main_commodityDetail_btn_left {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-around;
			font-size: $font_size_12;
			color: $text_color_333;

			.main_commodityDetail_btn_left_item {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}

		.main_commodityDetail_btn_content {
			width: 280rpx;
			background-color: $text_color_333;
			color: #FFF;
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
			font-weight: bold;
		}

		.main_commodityDetail_btn_right {
			width: 280rpx;
			background-color: $text_color_ec4141;
			color: #FFF;
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
			font-weight: bold;
		}
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	.u-content {
		text-align: center;
	}

	.shareMain {
		min-width: 600rpx;
		width: 600rpx;
		background-color: #fff;
		border-radius: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		padding-bottom: 20rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}

		.shareMain_img {
			image {
				width: 600rpx;
				height: 600rpx;
				border-radius: 20rpx 20rpx 0 0;
			}
		}

		.shareMain_text {
			width: calc(100% - 40rpx);
			display: flex;
			justify-content: space-between;

			.shareMain_text_t {
				flex: 1;

				.name {
					font-size: $font_size_14;
					color: $text_color_333;
				}

				.price {
					font-size: $font_size_18;
					color: $text_color_ec4141;

					.unit {
						font-size: $font_size_12;
						color: $text_color_808080;
					}
				}

				.text {
					font-size: $font_size_12;
					color: $text_color_808080;
				}
			}

			.shareMain_text_b {
				width: 180rpx;
				height: 180rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.xiazai {
			position: absolute;
			bottom: -60rpx;
			font-size: $font_size_14;
			color: #FFF;
			display: flex;
			align-items: center;

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
	.main_coupon {
		height: 80rpx;
		background-color: #fff;
		margin-top: 20rpx;
		display: flex;
		.coupon_left {;
			margin: 20rpx 50rpx 0 32rpx;
			font-size: 28rpx;
			color:#333
		}
		.coupon_right {
			margin-top: 14rpx;
			width: 160rpx;
			height: 52rpx;
			position: relative;
			font-size: 24rpx;
			color: #EC4141;
			text-align: center;
			line-height: 52rpx;
		 .coupon_img {
			width: 160rpx;
			height: 52rpx;
			
		}
		.coupon_text {
			width: 160rpx;
			height: 52rpx;
			position: absolute;
			top:0
		}	
		}
		
	}
	//弹框
	.show_coupon {
		width: 750rpx;
		height: 700rpx;
		background: inherit;
		background-color: rgba(255, 255, 255, 1);
		border: none;
		border-radius: 10px;
		border-bottom-right-radius: 0px;
		border-bottom-left-radius: 0px;
		.show_coupon_title {
			font-weight: 700;
			font-style: normal;
			font-size: 32rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 2rpx solid #e6e6e6;
			color: #333;
		}
		.content {
			 padding: 20rpx;
		    margin-top: 14rpx;
			position: relative;
			height: 510rpx;
			 .list {
			 	    width: 710rpx;
			 	    height: 200rpx;
					display: flex;
					position: absolute;
					left:0;
					top:0;
					.content_left {
						width: 200rpx;
						text-align: center;
						line-height: 192rpx;
						font-size: 60rpx;
						margin: 20rpx;
						color: #EC4141;
					}
					.content_right {
						display: flex;
						.content_title {
							width: 170px;
							margin: 30rpx 0 30rpx 10rpx;
							color: #EC4141;
							.content_title1 {
							font-size: 30rpx;
							margin-top:20rpx;
							font-weight: 700;
							width: 340rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							}
							.content_title2 {
							font-size: 24rpx;
							margin-top:20rpx;
							width: 330rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							}
							.content_title3 {
							font-size: 24rpx;
							margin-top:20rpx
							}
						}
						.content_use {
							width: 52rpx;
							height: 130rpx; 
							border-width: 2rpx;
							border-style: solid;
							border-color: rgba(128, 128, 128, 1);;
							border-radius: 32rpx;
							font-weight: 500;
							font-style: normal;
							color: #808080;
							text-align: center;
							line-height: 130rpx;
							margin-top: 30rpx;
						}
						.content_nouse {
							    width: 48rpx;
							    height: 103rpx; 
							    border-width: 2rpx;
							    border-style: solid;
							    border-color: rgba(236, 65, 65, 1);
							    border-radius: 32rpx;
							    font-weight: 500;
							    font-style: normal;
							    color: #EC4141;
							    margin-top: 57rpx;
							    text-align: center;
							    margin-left: 54rpx;
							    font-size: 28rpx;
							    padding-top: 24rpx;
							  
						}
					}
					
			 }
		}
		.show_coupon_bottom {
			font-size: 32rpx;
			color:#333
		}
	}
</style>